<template>
  <div ref="container" class="x6-graph" />
</template>

<script lang="ts">
import { Graph } from '@antv/x6'
import {defineComponent} from "vue";

export default defineComponent({
  name: "index",
  mounted() {
    const graph = new Graph({
      container: (this.$refs.container) as HTMLElement,
      width: 800,
      height: 600,
      grid: {
        visible: true,
        type: 'doubleMesh',
        args: [
          {
            color: '#eee', // 主网格线颜色
            thickness: 1, // 主网格线宽度
          },
          {
            color: '#ddd', // 次网格线颜色
            thickness: 1, // 次网格线宽度
            factor: 4, // 主次网格线间隔
          },
        ],
      },
      background: {
        color: '#fcfcfc',
        image:
            'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg',
        opacity: 0.2,
        repeat: 'watermark',
        angle: 30,
      },
    })

    const source=  graph.addNode({
      x: 100,
      y: 100,
      width: 80,
      height: 40,
      label: 'Hello',
    })

    const target = graph.addNode({
      x: 360,
      y: 300,
      width: 80,
      height: 40,
      label: 'World',
    },)
    graph.addEdge({source,target})
  }

})
</script>

<style scoped>

</style>
